<template>
	<div class="user-info">
		<div class="user-banner">
			<div class="info-cont">
				<div class="info-intro">
					<div class="user-avatar">
						<!-- <el-image style="width: 100%; height: 100%" :src="info.avatar" fit="cover"></el-image> -->
						<img v-if="info.avatar" :src="info.avatar" alt="">
						<img v-else src="../assets/img/home_user.png" alt="">
					</div>
					<div class="user-intro">
						<div class="user-title">
							<div class="user-nickname">{{info.nickName}}</div>
							<div class="user-result">{{info.userTitle || '暂无标签'}}</div>
							<!-- <div class="user-result">您的考试排名第<span>3</span>名，您打败了全网<span>99.9%</span>的用户！</div> -->

						</div>
						<div class="user-school">{{info.deptName}}</div>
						<div class="user-class">{{info.learningDirection}}</div>
					</div>
				</div>
				<div class="user-types">
					<div class="user-item">
						<div class="user-item-num">{{info.learningDays || 0}}</div>
						<div class="user-item-name">学习天数</div>
					</div>
					<div class="user-item">
						<div class="user-item-num">{{info.numberOfExam || 0}}</div>
						<div class="user-item-name">考试场数</div>
					</div>
					<div class="user-item">
						<div class="user-item-num">{{info.numberOfQuestions || 0}}</div>
						<div class="user-item-name">刷题总量</div>
					</div>
					<div class="user-item">
						<div class="user-item-num">{{info.accuracy || 0}}%</div>
						<div class="user-item-name">正确率</div>
					</div>
					<div class="user-set" @click="goUserSet">
						<i class="set-icon"></i>
						<span>个人设置</span>
					</div>
					<div class="user-set" @click="exit">
						<!-- <i class="set-icon"></i> -->
						<span>退出登录</span>
					</div>
				</div>
			</div>
		</div>
		<div class="user-content">
			<div class="user-nav">
				<div class="user-nav-item" @click="goUserSet">
					<div class="nav-icon">
						<img v-if="navActive != 1" src="../assets/img/user_icon1.png" alt="">
						<img v-else src="../assets/img/user_icon1_active.png" alt="">
					</div>
					<span>我的信息</span>
				</div>
				<div class="user-nav-item" :class="{ 'user-active': navActive == 2 }" @click="navActive = 2">
					<div class="nav-icon">
						<img v-if="navActive != 2" src="../assets/img/user_icon2.png" alt="">
						<img v-else src="../assets/img/user_icon2_active.png" alt="">
					</div>
					<span>我的学习</span>
				</div>
				<div class="user-nav-item" :class="{ 'user-active': navActive == 3 }" @click="navActive = 3">
					<div class="nav-icon">
						<img v-if="navActive != 3" src="../assets/img/user_icon3.png" alt="">
						<img v-else src="../assets/img/user_icon3_active.png" alt="">
					</div>
					<span>我的错题</span>
				</div>
				<div class="user-nav-item" :class="{ 'user-active': navActive == 4 }" @click="navActive = 4">
					<div class="nav-icon">
						<img v-if="navActive != 4" src="../assets/img/user_icon4.png" alt="">
						<img v-else src="../assets/img/user_icon4_active.png" alt="">
					</div>
					<span>我的考试</span>
				</div>
				<div class="user-nav-item" :class="{ 'user-active': navActive == 5 }" @click="navActive = 5">
					<div class="nav-icon">
						<img v-if="navActive != 5" src="../assets/img/user_icon5.png" alt="">
						<img v-else src="../assets/img/user_icon5_active.png" alt="">
					</div>
					<span>我的竞赛</span>
				</div>
				<div class="user-nav-item" :class="{ 'user-active': navActive == 6 }" @click="navActive = 6;imitateActive=1">
					<div class="nav-icon">
						<img v-if="navActive != 6" src="../assets/img/user_icon6.png" alt="">
						<img v-else src="../assets/img/user_icon6_active.png" alt="">
					</div>
					<span>模拟考试</span>
				</div>
			</div>
			<div class="user-tabs-cont">
				<cmp-myStudy v-if="navActive ==2"></cmp-myStudy>
				<cmp-myError v-if="navActive ==3"></cmp-myError>
				<cmp-myTest @userexamId="userexamId" v-if="navActive ==4  && testActive == 1"></cmp-myTest>
				<cmp-myTestIntro :testId="testId" v-if="navActive ==4 && testActive == 2"></cmp-myTestIntro>
				<cmp-myComp @userexamId="userCompId" v-if="navActive ==5  && compActive == 1"></cmp-myComp>
				<cmp-myCompIntro :testId="compId" v-if="navActive ==5 && compActive == 2"></cmp-myCompIntro>
				<cmp-imitate @dirChange="dirChange" @imitateType='imitateType'
					v-if="navActive ==6 && imitateActive==1"></cmp-imitate>
				<cmp-imitate2 :dir="selectDir" v-if="navActive ==6 && imitateActive==2"
					@imitateBack="imitateBackFn"></cmp-imitate2>
				<cmp-imitateFree :dir="selectDir" v-if="navActive ==6 && imitateActive==3"
					@imitateBack="imitateBackFn"></cmp-imitateFree>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getUserInfoApi
	} from '@/api/UserInfo'
	import cmpImitate from '@/components/cmp-imitate'
	import cmpImitate2 from '@/components/cmp-imitate2'
	import cmpImitateFree from '@/components/cmp-imitateFree'
	import cmpMyTest from '@/components/cmp-myTest'
	import cmpMyTestIntro from '@/components/cmp-myTestIntro'
	import cmpMyComp from '@/components/cmp-myComp'
	import cmpMyCompIntro from '@/components/cmp-myCompIntro'
	import cmpMyError from '@/components/cmp-myError'
	import cmpMyStudy from '@/components/cmp-myStudy'
	export default {
		data() {
			return {
				navActive: 2,
				imitateActive: 1,
				testId: 0,
				testActive: 1, // 考试页面展示
				compId: 0,
				compActive: 1,
				info: {},
				selectDir: ''
			}
		},
		created() {
			let activeType = this.$route.query.activeType
			console.log(activeType)
			if (activeType) {
				this.navActive = activeType
			}
			this.getUserInfo()
		},
		methods: {
			imitateBackFn(val) {
				this.imitateActive = 1
			},
			userexamId(val) {
				this.testId = val
				this.testActive = 2
			},
			userCompId(val) {
				this.compId = val
				this.compActive = 2
			},
			getUserInfo() {
				getUserInfoApi().then(res => {
					if (res.code == 200) {
						this.info = res.data
						let avatar = res.data.avatar
						this.$store.commit('SET_AVATAR', avatar)
						this.$cookies.set('sy_avatar', avatar)
						this.$store.commit('SET_NICKNAME', res.data.nickName)
						this.$cookies.set('sy_username', res.data.nickName)
						this.$store.commit('SET_NICKNAME', res.data.nickName)
						this.$cookies.set('sy_username', res.data.nickName)
						this.$store.commit('SET_USERINFO', res.data)
						this.$cookies.set('sy_userInfo', res.data)
					}

				})
			},
			exit() {
				this.$confirm('您确认要退出登录吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$store.commit('SET_AVATAR', '')
					this.$cookies.remove('sy_avatar')
					this.$store.commit('SET_NICKNAME', '')
					this.$cookies.remove('sy_username')
					this.$store.commit('SET_USERINFO', '')
					this.$cookies.remove('sy_userInfo')
					this.$cookies.remove('sy_token')
					this.$store.commit('SET_TOKEN', '')
					this.$router.push('/')
				}).catch(() => {

				});

			},
			goUserSet() {
				this.$router.push('/UserSet')
			},
			imitateType(val) {
				this.imitateActive = val
			},
			dirChange(val) {
				this.selectDir = val
			}
		},
		components: {
			cmpImitate,
			cmpMyTest,
			cmpMyError,
			cmpMyStudy,
			cmpImitate2,
			cmpImitateFree,
			cmpMyTestIntro,
			cmpMyComp,
			cmpMyCompIntro
		}
	}
</script>

<style lang="less">
	@contWidth: 1280px;

	.user-info {
		background-color: #F7F7F7;
		min-height: 100vh;

		.user-banner {
			background: url(../assets/img/user_banner.png);
			background-size: cover;
		}

		.info-cont {
			width: @contWidth;
			margin: 0 auto;
			height: 167px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.info-intro {
			display: flex;
			align-items: center;
		}

		.user-avatar {
			width: 85px;
			height: 85px;
			border: 2px solid #FFFFFF;
			border-radius: 85px;
			overflow: hidden;
			margin-right: 20px;
		}

		.user-title {
			display: flex;
			align-items: center;
			margin-bottom: 10px;
		}

		.user-nickname {
			margin-right: 30px;
			font-size: 24px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 33px;
		}

		.user-result {
			width: 320px;
			height: 30px;
			background: url(../assets/img/user_title_bg.png)no-repeat;
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 13px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #FFDAA6;
			padding: 0 10px;
		}

		.user-school {
			font-size: 14px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 20px;
			margin-bottom: 4px;
		}

		.user-class {
			font-size: 14px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 20px;
		}

		.user-types {
			display: flex;
			align-items: center;
		}

		.user-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 0 20px;
		}

		.user-item-num {
			font-size: 24px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 33px;
		}

		.user-item-name {
			font-size: 14px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 20px;
		}

		.user-set {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 112px;
			height: 34px;
			border-radius: 17px;
			border: 1px solid #FFFFFF;
			margin-left: 20px;
			cursor: pointer;

			span {
				font-size: 14px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.set-icon {
			width: 16px;
			height: 16px;
			background: url(../assets/img/set_icon.png);
			background-size: 100% 100%;
			margin-right: 10px;
		}

		.user-content {
			width: @contWidth;
			margin: 0 auto;
			display: flex;
			padding: 20px 0;
		}

		.user-nav {
			width: 224px;
			height: 247px;
			padding: 10px 0;
			background: #FFFFFF;
			border-radius: 4px;
			margin-right: 16px;
			overflow: hidden;
		}

		.user-nav-item {
			height: 38px;
			display: flex;
			align-items: center;
			padding-left: 25px;
			cursor: pointer;

			span {
				font-size: 14px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
		}

		.user-active {
			background-color: #2360FE;

			span {
				color: #fff;
			}
		}

		.nav-icon {
			width: 18px;
			height: 18px;
			margin-right: 10px;
		}

		.user-tabs-cont {
			flex: 1;
			background: #FFFFFF;
			border-radius: 4px;
			overflow: hidden;
		}
	}
</style>